<template>
  <div class="app-container home" v-loading="loading">
    <el-card>
      <div slot="header" class="card-head clearfix">
        <span>合格证统计</span>
      </div>
      <div>
        <el-row :gutter="20" class="count-div">
          <el-col :span="6">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <h2>开具总数量</h2>
              <p>{{ info.allCert || "0" }}张</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <h2>今日开具数</h2>
              <p>{{ info.todayCert || "0" }}张</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <h2>打印总数量</h2>
              <p>{{ info.allPrint || "0" }}张</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <h2>今日打印数</h2>
              <p>{{ info.todayPrint || "0" }}张</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div slot="header" class="card-head clearfix">
        <span>主体统计</span>
      </div>
      <div>
        <el-row class="count-div">
          <el-col :span="24">
            <el-card shadow="always" :body-style="{ padding: '5px' }">
              <h2>主体总数量</h2>
              <p>{{ info.entityNum || "0" }}家</p>
            </el-card>
          </el-col>
        </el-row>

        <el-row class="count-div">
          <el-col :span="24">
            <div ref="entityChart" style="height: 400px" />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {countData} from "@/api/business";
import * as echarts from "echarts";

export default {
  name: "Index",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 统计信息
      info: {},
      // 主体数量统计
      entityChart: null,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true;
      countData().then(response => {
        this.loading = false;
        this.info = response.data;

        this.entityChart = echarts.init(this.$refs.entityChart, "macarons");
        this.entityChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: response.data.entityAttrChartXAxis
          },
          yAxis: {
            type: 'value',
            name: '单位：家',
          },
          series: [
            {
              data: response.data.entityAttrChartData,
              type: 'bar'
            }
          ]
        });

        window.addEventListener("resize", () => {
          this.entityChart.resize();
        });
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .el-card__header {
    padding: 15px;
    background-color: #eee;
    font-weight: bold;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .count-div {
    text-align: center;
  }
}
</style>

